<template>
  <el-container>
    <el-header style="height: 47px;">
      <p>收费员业务统计列表</p>
    </el-header>
    <el-main>
      <el-table
        :data="tableData.list"
        style="width:100%"
        height="600"
        tooltip-effect="dark"
        stripe
        :fit="true"
        v-loading="tableLoad"
      >
        <el-table-column sortable align="center" label="序号" prop="xh" width="80"></el-table-column>
        <el-table-column sortable align="center"  prop="record_name" label="收费员" min-width="200"></el-table-column>
        <el-table-column sortable align="center" prop="groupname" label="所属片区" min-width="200"></el-table-column>
        <el-table-column sortable align="center" prop="ondutytime" label="工作时长" min-width="200"></el-table-column>
        <el-table-column sortable align="center" prop="operationplaces" label="操作泊位数" min-width="200"></el-table-column>
        <el-table-column sortable align="center" prop="provetimes" label="取证次数" min-width="200"></el-table-column>
        <el-table-column sortable align="center" prop="intimes" label="入场次数" min-width="200"></el-table-column>
        <el-table-column sortable align="center" prop="outtimes" label="出场次数" min-width="200"></el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-pagination
        background
        layout="total,sizes,prev,pager,next,jumper"
        :total="dataCount"
        :page-sizes="[10,20,30,50]"
        :page-size="dataPageSize"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        style="margin-top: 10px;"
      ></el-pagination>
    </el-footer>
  </el-container>
</template>

<script>
  export default {
    name: 'tollBusinessTable',
    props: ['tableLoad', 'tableData'],
    data() {
      return {
        dataCount: 0,
        dataPageSize: 10,
        tableDatas: []
      }
    },
    watch: {
      tableData: function(val) {
        console.log(val)
        this.dataCount = val.count
        this.dataPageSize = val.pageSize
      }
    },
    methods: {
      handleCurrentChange: function(val) {
        this.$emit('pageNum', val)
      },
      handleSizeChange: function(val) {
        this.$emit('pageSize', val)
      }
    }
  }
</script>

<style scoped>
  .el-main{
    padding: 0;
    margin-top: 24px;
    margin-left: 24px;
  }
  .el-header p{
    font-family: MicrosoftYaHei;
    font-size: 13px;
    margin-top: 22px;
    color: #7F8CA6;
  }
  .el-header{
    padding:0;
    margin-left: 24px;
    margin-right: 24px;
    border-bottom: 1px solid #E1E1E1;
  }
  .el-footer{
    text-align: right;
  }
</style>
